<template>
  <div class="querycss fsc">
    <!-- <div class="fsc h100 w100"> -->
    <el-row :gutter="24" style="width: 102%;">
      <el-col :span="24">
        <p class="tipBox" v-if="queryTitle">
          <svg-icon icon-class="tishitianchong"></svg-icon>可直接选取
          <el-button type="primary" link>{{queryTitle}}</el-button>查询
        </p>
      </el-col>
      <el-col :span="item.col?item.col:6" v-for="(item,index) in queryList" :key="index" 
      v-show="item.type!='yincang'
        &&!item.show">
        <div class="w100 titleType" style="display: flex;align-items:center;margin: 5px 0;">
          <div v-show="item.type!='yincang'" class="globalFontSize fontColor"
            style="white-space: nowrap;text-align: right;font-weight: 400;margin-right: 5px;">
            {{ item.title }}</div>
          <el-select style="width: 100%;" v-if="item.type==='select'" size="default" v-model="item.binddata" filterable
            clearable placeholder="请选择">
            <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select style="width: 100%;" v-if="item.type==='select_label'" size="default" v-model="item.binddata"
            filterable clearable placeholder="请选择">
            <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
          <el-select style="width:100%;" v-if="item.type==='select_value'" size="default" v-model="item.binddata"
            filterable clearable placeholder="请选择">
            <el-option v-for="item in item.options" :key="item.value" :label="item.value" :value="item.value">
            </el-option>
          </el-select>
          <el-select multiple style="width: 100%;" v-if="item.type==='multiple_select'" size="default"
            v-model="item.binddata" filterable clearable placeholder="请选择">
            <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select style="width: 100%;" v-if="item.type==='stateselect'" size="default" v-model="item.binddata"
            filterable clearable placeholder="请选择">
            <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-input style="width: 100%;" size="default" v-if="item.type==='input'" v-model="item.binddata" clearable
            :placeholder="item.tip ? item.tip:'请输入'" />
          <div style="display: flex;align-items: center;" v-if="item.type==='inputrange'">
            <el-input style="width: 50%;" size="default" v-model="item.binddata[0]" placeholder="请输入" clearable
              :disabled="item.disabled" />
            <span>-</span>
            <el-input style="width: 50%;" size="default" placeholder="请输入" v-model="item.binddata[1]" clearable
              :disabled="item.disabled" />
          </div>
          <el-input style="width: 100%;" size="default" v-if="item.type==='yincang'&&false" v-model="item.binddata"
            clearable />
          <el-radio-group v-model="item.binddata" v-if="item.type==='radio'" @change="radionormalChange($event,item)">
            <el-radio v-for="itemsub in item.options" :label="itemsub.value">
              {{ itemsub.label }}</el-radio>
          </el-radio-group>
          <el-radio-group v-model="item.binddata" @change="radiospecialChange($event,item)" v-if="item.type==='radiospecial'">
            <el-radio v-for="itemsub in item.options" :label="itemsub.value">
              {{ itemsub.label }}</el-radio>
          </el-radio-group>
          <el-checkbox v-if="item.type=='elcheckbox'" v-model="item.binddata" 
          @change="radiospecialChange($event,item)"></el-checkbox>
          <el-switch v-model="item.binddata" v-if="item.type==='switch'" @change="switchnormalChange($event,item)" />
          <el-switch v-model="item.binddata" v-if="item.type==='switchopenSearch'" @change="switchopenSearchChange" />
          <el-cascader style="width: 100%;" :props="item.cascader_props" placeholder="请选择" size="default"
            v-if="item.type==='cascader'" v-model="item.binddata" :options="item.options" clearable filterable
            :show-all-levels="false" :collapse-tags="true" :collapse-tags-tooltip="true">
            <template #default="{ node, data }">
              <span>{{ data.name }}</span>
            </template>
          </el-cascader>
          <el-cascader style="width: 100%;" v-if="item.type=='cascaderRadionarmal'" ref="cascaderRadionarmal" filterable
            v-model="item.binddata" :options="item.options" :props="item.props" clearable collapse-tags
            collapse-tags-tooltip @change="cascaderRadionarmalChange($event,item)" />
          <!-- 任意一级可选 -->
          <el-cascader style="width: 100%;" v-if="item.type=='cascaderRadio'" filterable v-model="item.binddata"
            @change="cascaderRadioSpecialChange" :options="item.options" :props="item.props"
             :clearable="!item.clearValue" />
          <el-cascader style="width: 100%;" ref="cascaderRadioSpecial" filterable
            v-if="item.type=='cascaderRadioSpecial'" :options="item.options" v-model="item.binddata" :props="item.props"
            clearable @change="cascaderpointSpecialChange" />
          <el-cascader style="width: 100%;" filterable
            v-if="item.type=='cascaderPoint'" :options="item.options" v-model="item.binddata" :props="item.props"
            clearable />
          <el-select style="width: 100%;" v-if="item.type==='selectspecial'" @change="selectspecialChange"
            size="default" v-model="item.binddata" filterable  placeholder="请选择">
            <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <!-- 日期范围 -->
          <el-date-picker v-if="item.type==='daterange'" v-model="item.binddata" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
          <el-date-picker style="width: 100%;" v-if="item.type==='datetime'" value-format="YYYY-MM-DD"
            format="YYYY-MM-DD" v-model="item.binddata" type="date" placeholder="选择日期"
            @change="datetimeSpecial($event,item)" :clearable="false" />
            <!-- 报表专用 -->
          <el-date-picker style="width: 100%;" v-if="item.type==='datetimer'" value-format="YYYY-MM-DD"
            format="YYYY-MM-DD" v-model="item.binddata" type="date" placeholder="选择日期"
            @change="datetimeSpecial($event,item)" :clearable="false" />
          <el-date-picker style="width: 100%;" size="default" v-if="item.type==='datayear'"
          @change="datetimeSpecial($event,item)" v-model="item.binddata"
            type="year" value-format="YYYY" placeholder="请选择年度" />
          <el-date-picker style="width: 100%;" size="default" v-if="item.type==='datamonth'" v-model="item.binddata"
            type="month" value-format="YYYY-MM" placeholder="请选择月份" @change="datetimeSpecial($event,item)" />
          <div @click.once="setdata" v-if="item.type==='hisdatetimerange'">
            <el-date-picker style="width: 100%" v-model="item.binddata"  type="datetimerange" :clearable="false" size="default"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0),new Date(2000, 1, 1, 23, 59, 59)]" :shortcuts="[
                    {
                      text: '1天前',
                      value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24)
                        return [start, end]
                      },
                    },
                    {
                      text: '7天前',
                      value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        return [start, end]
                      },
                    },
                    {
                      text: '30天前',
                      value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        return [start, end]
                      },
                    },
                    ]" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间">
            </el-date-picker>
          </div>
          <div @click.once="setdata" v-if="item.type==='datetimerange'">
            <el-date-picker style="width: 100%" v-model="item.binddata" type="datetimerange" size="default"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0),new Date(2000, 1, 1, 23, 59, 59)]" :clearable="false" :shortcuts="[
                    {
                      text: '1天前',
                      value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24)
                        return [start, end]
                      },
                    },
                    {
                      text: '7天前',
                      value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        return [start, end]
                      },
                    },
                    {
                      text: '30天前',
                      value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        return [start, end]
                      },
                    },
                    ]" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间">
            </el-date-picker>
          </div>
          <div @click.once="setdata" v-if="item.type==='datetimestartEnd'"
           style="width: 100%">
            <el-date-picker style="width: 100%" @change="datetimeSpecial($event,item)" v-model="item.binddata" type="datetimerange" size="default"
              :clearable="false" :default-time="[new Date(2000, 1, 1, 0, 0, 0),new Date(2000, 1, 1, 23, 59, 59)]"
              :shortcuts="[
                    {
                      text: '1天前',
                      value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24)
                        return [start, end]
                      },
                    },
                    {
                      text: '7天前',
                      value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        return [start, end]
                      },
                    },
                    {
                      text: '30天前',
                      value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        return [start, end]
                      },
                    },
                    ]" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间">
            </el-date-picker>
          </div>
          <el-switch v-model="item.binddata" @change="switchgaojiChange" v-if="item.type==='switchgaoji'" />
        </div>
        <div v-if="state.gaojiShow" class="w100" style="display: flex;align-items:center;margin: 5px 0;">
          <div class="globalFontSize"
            style="color: #333333;white-space: nowrap;text-align: right;font-weight: 400;margin-right: 5px;">
            {{ item.titlegaoji }}</div>
          <!-- 高级搜索条件 -->
          <el-select style="width: 100%;" v-if="item.type==='selectSenior'" size="default" v-model="item.binddata"
            filterable clearable placeholder="请选择">
            <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-input style="width: 100%;" size="default" v-if="item.type==='inputSenior'" v-model="item.binddata"
            clearable :placeholder="item.tip ? item.tip:'请输入'" />
          <el-switch v-model="item.binddata" v-if="item.type==='switchSenior'" />
        </div>
      </el-col>
      <el-col :span="6" style="display: flex;align-items: center;">
        <el-button @click="btnclick(1)" style="width: 70px;text-align: right" size="default" type="primary">
          查询</el-button>
        <el-button @click="btnclick(2)" class="rest"
          style="margin-left:15px;width: 70px;text-align: right;background-color:rgba(91, 109, 128, 0.08);border:none;"
          size="default">
          重置
        </el-button>
        <el-button class="shouqiquery" type="primary" link @click="btnclick(3)" size="default">
          收起<svg-icon icon-class="shang"></svg-icon>
        </el-button>
      </el-col>
    </el-row>
    <!-- </div> -->
  </div>
</template>
<script>
  import {
    reactive
  } from "vue";
  import {
    useStore
  } from "vuex";
  import {
    useRouter
  } from "vue-router";
  import dayjs from "dayjs";
  export default {
    name: "querybox",
    props: {
      queryList: {
        default: () => [],
      },
      queryTitle: {
        default: () => undefined,
        type: String,
      },
    },
    setup(props, {
      emit
    }) {
      const router = useRouter()
      const store = useStore()
      const {
        proxy
      } = getCurrentInstance();
      let state = reactive({
        gaojiShow: false
      })

      function btnclick(type) {
        if (type === 1) {
          emit('query', type)
        }
        if (type === 2) {
          props.queryList.forEach(item => {
            if (item.titlegaoji) {
              state.gaojiShow = false
              item.show = true
            }
            if (item.type == 'switchgaoji') {
              item.binddata = false
            } else if (item.type == 'radiospecial') {
              if (item.binddata === 1) {
                if (item.type == 'datetimestartEnd') {
                  item.binddata = [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format(
                    'YYYY-MM-DD HH:mm:ss')]
                }
                if (item.fieldSpecial == 'condition') {
                  item.binddata = 'A'
                }
                if (item.fieldSpecialkg == 'condition') {
                  item.binddata = 'D'
                }
              } else {
                if (item.type == 'datetimestartEnd') {
                  item.binddata = undefined
                }
                if (item.type == 'datetime') {
                  item.binddata = dayjs().format('YYYY-MM-DD')
                }
                if (item.fieldsearch == 'banci') {
                  item.binddata = item.options[0].value
                }
                if (item.fieldSpecial == 'condition') {
                  item.binddata = 'A'
                }
                if (item.fieldSpecialkg == 'condition') {
                  item.binddata = 'D'
                }
              }
            } else if (item.type == 'hisdatetimerange') {
              item.binddata = [dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"),
              dayjs().format("YYYY-MM-DD HH:mm:ss"),]
            } else {
              if (item.type != 'datetimestartEnd') {
                item.binddata = undefined
                if (item.field == "stationStatus") {
                  item.binddata = 2
                }
                if (item.field == "controlPortType") {
                  item.binddata = 1
                }
                if (item.type == 'switchopenSearch') {
                  item.binddata = false
                }
                if (item.type == 'inputrange') {
                  item.binddata = ['', '']
                  item.disabled = true
                }

                if (item.type == 'datetime') {
                  item.binddata = dayjs().format('YYYY-MM-DD')
                  emit('query', {
                    type: 5,
                    val: 0,
                    item:item
                  })
                }
                if (item.fieldsearch == 'banci') {
                  if(item.options.length>0){
                    item.binddata = item.options[0].value
                  }
                }
                if (item.fieldSpecial == 'condition') {
                  item.binddata = 'A'
                }
                if (item.fieldSpecialkg == 'condition') {
                  item.binddata = 'D'
                }

              } else {
                item.binddata = [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format(
                  'YYYY-MM-DD HH:mm:ss')]
              }
            }
          })
          emit('query', type)
        }
        if (type === 3) {
          emit('query', type)
        }
      }

      function setdata() {
        let element = document.querySelector('button.el-picker-panel__icon-btn.arrow-left')
        if (element) element.click()
      }
      // 高级搜索展示
      function switchgaojiChange(val) {
        state.gaojiShow = val
        props.queryList.forEach(item => {
          if (item.titlegaoji) {
            if (val) {
              item.show = false
            } else {
              item.show = true
            }
          }
        })
      }
      // 特殊处理单选--如时间
      function radiospecialChange(val,item) {
          emit('query', {
            type: 'report',
            val: val,
            item:item
          })
        if (val == 2) {
          emit('query', {
            type: 5,
            val: 0,
            item:item
          })
          props.queryList.forEach(item => {
            if (item.type == 'datetimestartEnd') {
              item.binddata = undefined
            }
            if (item.typespecial == 1) {
              item.show = false
              if (item.type == 'cascaderRadio') {
                item.binddata = undefined
              }
            } else if (item.typespecial == 2) {
              item.show = true
              if (item.type == 'cascaderRadio') {
                item.binddata = undefined
              }
            }
          })
        } else {
          props.queryList.forEach(itemsub => {
            if (itemsub.type == 'datetimestartEnd'&&item.type !='elcheckbox') {
              itemsub.binddata = [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format(
                'YYYY-MM-DD HH:mm:ss')]
            }
            if (itemsub.typespecial == 1) {
              itemsub.show = true
            } else if (itemsub.typespecial == 2) {
              itemsub.show = false
            }
          })
        }
      }
      // 正常单选事件
      function radionormalChange(val, item) {
        emit('query', {
          type: 'report',
          val: val,
          item: item
        })
      }

      function switchnormalChange(val, item) {
        emit('query', {
          type: 'report',
          val: val,
          item: item
        })
      }

      function cascaderRadioSpecialChange(val) {
        console.log(val,"大萨达看见啊")
        emit('query', {
          type: 4,
          val: val
        })
      }

      function selectspecialChange(val) {
        emit('query', {
          type: 5,
          val: val
        })
      }

      function datetimeSpecial(val, item) {
        emit('query', {
          type: 5,
          val1: val,
          item: item
        })
      }

      function cascaderpointSpecialChange(val) {
        let data = proxy.$refs.cascaderRadioSpecial[0].getCheckedNodes()[0]
        props.queryList.forEach(item => {
          if (item.type == 'cascaderRadioSpecial') {
            if (data) {
              if (data.level == 1) {
                item.binddata1 = [data.text, undefined, undefined]
              } else if (data.level == 2) {
                if (data.childrenData == null) {
                  item.binddata1 = [data.data.sensorName ? data.data.sensorName : data.data.placeName, data.label,
                    data.data.place
                  ]
                } else {
                  item.binddata1 = [data.data.sensorName ? data.data.sensorName : data.data.placeName, undefined,
                    undefined
                  ]
                }
              } else if (data.level == 3) {
                if (data.childrenData == null) {
                  item.binddata1 = [data.data.sensorName ? data.data.sensorName : data.data.placeName, data.label,
                    data.data.place
                  ]
                } else {
                  item.binddata1 = [data.data.sensorName ? data.data.sensorName : data.data.placeName, undefined,
                    data.label
                  ]
                }
              } else if (data.level == 4) {
                item.binddata1 = [data.data.sensorName ? data.data.sensorName : data.data.placeName, data.label,
                  data.data.place
                ]
              }
            } else {
              item.binddata = undefined
            }
          }
        })
      }

      function cascaderRadionarmalChange(val, item) {
        let id = undefined
        if (proxy.$refs.cascaderRadionarmal[0].getCheckedNodes()[0]) {
          id = proxy.$refs.cascaderRadionarmal[0].getCheckedNodes()[0].data.id
        }
        emit('query', {
          type: 44,
          val1: val,
          val2: id,
          item: item
        })
      }
      // 是否开启搜索范围
      function switchopenSearchChange(val) {
        emit('query', {
          type: 'switchopenSearch',
          val: val
        })
      }

      return {
        switchnormalChange,
        radionormalChange,
        switchopenSearchChange,
        datetimeSpecial,
        cascaderRadionarmalChange,
        cascaderpointSpecialChange,
        selectspecialChange,
        cascaderRadioSpecialChange,
        radiospecialChange,
        switchgaojiChange,
        store,
        state,
        btnclick,
        setdata,
        router,
      }
    }
  }
</script>
<style lang="scss">
  .fontColor {
    color: #333;
  }

  .querycss {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 12px 16px 20px;

    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 8px;
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #C7C9CC;
    }

    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: #ffffff;
    }

    //.el-range-separator {
    //  color: white;
    //}
    //.el-range-input {
    //  background: transparent;
    //  color: white;
    //}
  }

  .tipBox {
    border-radius: 4px;
    background: rgba(68, 136, 255, 0.12);
    border: 1px solid rgba(68, 136, 255, 0.2);
    padding: 4px 12px 4px 12px !important;
    font-size: 14px !important;
    display: flex;
    align-items: center;
  }
</style>